<template>
    <scroll-view class="sale-filter-container" scroll-y="true">
        <!-- <view class="title">筛选条件</view> -->
        <view :class="isIOS?'range-time':'range-time ans-range-time'">
            <view class="text">起止时间</view>
            <choose-date
                ref="chooseDatePanel"
                class="choose-date"
                :startDate="startDate"
                :endDate="endDate"
                :isFilter="true"
                :separate="true"
                @selStartDate="selStartDate"
                @selEndDate="selEndDate">
            </choose-date>
        </view>
		<view class="sales-man">
		    <view class="text">销售组织</view>
		    <view class="select-wrapper" @click="openMarketingDrawer">
		        <view class="text text-show-line-1" :class="{ 'has-salesman': getMarketingName }">{{
		            getMarketingName ? getMarketingName : "请选择销售组织"
		        }}</view>
		        <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
		    </view>
		</view>
        <view class="sales-man">
            <view class="text">业务员</view>
            <view class="select-wrapper" @click="handleSelectSalesman">
                <view class="text" :class="{ 'has-salesman': selectedSalesman }">{{
                    selectedSalesman ? selectedSalesman.FullName : "请选择业务员"
                }}</view>
                <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
            </view>
        </view>
		<view class="sales-man">
		    <view class="text">客户</view>
		    <view class="select-wrapper" @click="openCustomDrawer">
		        <view class="text text-show-line-1" :class="{ 'has-salesman': getFinalCustom }">{{
		            getFinalCustom ? getFinalCustom : "请选择客户"
		        }}</view>
		        <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
		    </view>
		</view>
		<view class="sales-man">
		    <view class="text">项目</view>
		    <view class="select-wrapper" @click="openProjectDrawer">
		        <view class="text text-show-line-1" :class="{ 'has-salesman': getProjectName }">{{
		            getProjectName ? getProjectName : "请选择项目"
		        }}</view>
		        <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
		    </view>
		</view>
		<view class="sales-man">
		    <view class="text">仓库</view>
		    <view class="select-wrapper" @click="openWarehouseDrawer">
		        <view class="text text-show-line-1" :class="{ 'has-salesman': getWarehouseName }">{{
		            getWarehouseName ? getWarehouseName : "请选择仓库"
		        }}</view>
		        <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
		    </view>
		</view>
        <view class="sales-man">
            <view class="text">物料</view>
            <view class="select-wrapper" @click="openMaterialDrawer">
                <view class="text text-show-line-1" :class="{ 'has-salesman': getMaterialName }">{{
                    getMaterialName ? getMaterialName : "请选择物料"
                }}</view>
                <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
            </view>
        </view>
        <view class="sales-man">
            <view class="text">部门</view>
            <view class="select-wrapper" @click="openDeptDrawer">
                <view class="text text-show-line-1" :class="{ 'has-salesman': getDeptName }">{{
                    getDeptName ? getDeptName : "请选择部门"
                }}</view>
                <iconsfont customIcons="icon-xialaxuanze" size="32"></iconsfont>
            </view>
        </view>
		<view class="sales-man flex-s-c" @click="zeroClick(dataZero1)">
		    <view class="text">显示为0的数据：</view>
			<view class="selected-icon flex-center" v-show="dataZero1">
			    <view class="point"></view>
			</view>
			<view class="unselected-icon" v-show="!dataZero1"> </view>
		</view>
		<view :class="isIOS?'apple-style bottom-wrapper':'bottom-wrapper'">
		            <view class="reset-btn flex-center" @click="wrapperhandleReset">重置</view>
		            <view class="sure-btn flex-center" @click="wrapperhandleSure">确认</view>
		</view>
        <uni-drawer ref="showRight" mode="right" :width="300">
            <drawer-container @reset="handleReset" @sure="handleSure">
                <choose-salesman />
            </drawer-container>
        </uni-drawer>
		<uni-drawer ref="showRightCustom" mode="right" :width="300">
		    <drawer-container @reset="handleResetCustom" @sure="handleSureCustom">
		        <custom-content />
		    </drawer-container>
		</uni-drawer>
		<uni-drawer ref="showRightProject" mode="right" :width="300">
			<drawer-container @reset="handleResetProject" @sure="handleSureProject">
				<project-content />
			</drawer-container>
		</uni-drawer>
		<uni-drawer ref="showRightMarketing" mode="right" :width="300">
			<drawer-container @reset="handleResetMarketing" @sure="handleSureMarketing">
				<marketing-content />
			</drawer-container>
		</uni-drawer>
		<uni-drawer ref="showRightWarehouse" mode="right" :width="300">
			<drawer-container @reset="handleResetWarehouse" @sure="handleSureWarehouse">
				<warehouse-content />
			</drawer-container>
		</uni-drawer>
        <uni-drawer ref="showRightMaterial" mode="right" :width="300">
        	<drawer-container @reset="handleResetMaterial" @sure="handleSureMaterial">
        		<material-content />
        	</drawer-container>
        </uni-drawer>
        <uni-drawer ref="showRightDept" mode="right" :width="300">
        	<drawer-container @reset="handleResetDept" @sure="handleSureDept">
        		<dept-content />
        	</drawer-container>
        </uni-drawer>
    </scroll-view>
</template>

<script>
import { CHANGE_DATE,
CHANGE_STARTDATE,
CHANGE_ENGDATE,
CHANGE_SALE_SELECTED,
CHANGE_SALE_SEARCH_VAL,
CHANGE_CUSTOM_SEARCH_VAL,
CHANGE_CUSTOM_SELECTED,
CHANGE_PROJECT_SEARCH_VAL,
CHANGE_PROJECT_SELECTED,
CHANGE_MARKETING_SEARCH_VAL,
CHANGE_MARKETING_SELECTED,
CHANGE_WAREHOUSE_SEARCH_VAL,
CHANGE_WAREHOUSE_SELECTED,
CHANGE_MATERIAL_SEARCH_VAL,
CHANGE_MATERIAL_SELECTED,
CHANGE_DEPT_SEARCH_VAL,
CHANGE_DEPT_SELECTED,
CHANGE_ZERO_SELECTED
} from "@/store/mutation-type.js"
import { mapState, mapMutations } from "vuex"
import chooseDate from "@/pages_erp/components/choose-date.vue"
import customContent from "@/pages_erp/debt-receivable/childCpns/custom-content.vue"
import projectContent from "@/pages_erp/debt-receivable/childCpns/project-content.vue"
import marketingContent from "@/pages_erp/debt-receivable/childCpns/marketing-content.vue"
import warehouseContent from "@/pages_erp/debt-receivable/childCpns/warehouse-content.vue"
import materialContent from "@/pages_erp/debt-receivable/childCpns/material-content.vue"
import deptContent from "@/pages_erp/debt-receivable/childCpns/dept-content.vue"
import chooseSalesman from "@/pages_erp/components/choose-salesman.vue"
const systemInfo = uni.getSystemInfoSync();
const isIOS = systemInfo.platform === 'ios';
export default {
    components: {
        chooseDate,
        chooseSalesman,
		customContent,
		projectContent,
		marketingContent,
		warehouseContent,
        materialContent,
        deptContent,
    },
    computed: {
        ...mapState("report", ["selectedSalesman", "startDate", "endDate","selectedCustoms","selectedProject","selectedMarketing","selectedWarehouse","selectedMaterial","selectedDept","dataZero"]),
		getFinalCustom() {
		    return this.selectedCustoms.map((item) => item.FullName).toString()
		},
		getProjectName() {
		    return this.selectedProject.map((item) => item.ProjectName).toString()
		},
		getMarketingName() {
		    return this.selectedMarketing.map((item) => item.OrganizationsName).toString()
		},
		getWarehouseName() {
		    return this.selectedWarehouse.map((item) => item.StockInfoName).toString()
		},
        getMaterialName() {
            return this.selectedMaterial.map((item) => item.FNAME).toString()
        },
        getDeptName() {
            return this.selectedDept.map((item) => item.DeptInfoName).toString()
        },
		dataZero1() {
			console.log(this.dataZero)
		    return this.dataZero
		},
    },
	data(){
		return {
		  isSelected:true,
		  isIOS:isIOS
		}
	},
    methods: {
        ...mapMutations("report", [CHANGE_DATE,CHANGE_STARTDATE,CHANGE_ENGDATE,CHANGE_SALE_SELECTED,CHANGE_SALE_SEARCH_VAL,CHANGE_CUSTOM_SEARCH_VAL, CHANGE_CUSTOM_SELECTED,CHANGE_PROJECT_SEARCH_VAL,CHANGE_PROJECT_SELECTED,CHANGE_MARKETING_SEARCH_VAL,CHANGE_MARKETING_SELECTED,CHANGE_WAREHOUSE_SEARCH_VAL,CHANGE_WAREHOUSE_SELECTED,CHANGE_MATERIAL_SEARCH_VAL,CHANGE_MATERIAL_SELECTED,CHANGE_DEPT_SEARCH_VAL,CHANGE_DEPT_SELECTED,CHANGE_ZERO_SELECTED]),
        selDate(e) {
            if (e) {
                const [startDate, endDate] = e.split(",")
                this[CHANGE_DATE]({ startDate, endDate })
            }
        },
		selStartDate(e){
			if (e) {
			    this[CHANGE_STARTDATE](e)
			}
		},
		selEndDate(e){
			if (e) {
			    this[CHANGE_ENGDATE](e)
			}
		},
		wrapperhandleReset() {
		    this.$emit("reset")
		},
		wrapperhandleSure() {
		    this.$emit("sure")
		},
        handleSelectSalesman() {
            this.$refs.showRight.open()
        },
        handleReset() {
			this[CHANGE_SALE_SELECTED]("")
			this[CHANGE_SALE_SEARCH_VAL]("")
			uni.$emit("resetSalesmanList")
			this.$emit("handleSure")
        },
        handleSure() {
            this.$refs.showRight.close()
        },
		openCustomDrawer() {
		    this.$refs.showRightCustom.open()
		},
		handleResetCustom() {
		    this[CHANGE_CUSTOM_SELECTED]([])
		    this[CHANGE_CUSTOM_SEARCH_VAL]("")
		    uni.$emit("resetCustom")
		    this.$emit("handleSureCustom")
		},
		handleSureCustom() {
		    this.$refs.showRightCustom.close()
		    this.$emit("handleSureCustom")
		},
		openProjectDrawer() {
		    this.$refs.showRightProject.open()
		},
		handleResetProject() {
		    this[CHANGE_PROJECT_SELECTED]([])
		    this[CHANGE_PROJECT_SEARCH_VAL]("")
		    uni.$emit("resetProject")
		    this.$emit("handleSureProject")
		},
		handleSureProject() {
		    this.$refs.showRightProject.close()
		    this.$emit("handleSureProject")
		},
		openMarketingDrawer() {
		    this.$refs.showRightMarketing.open()
		},
		handleResetMarketing() {
		    this[CHANGE_MARKETING_SELECTED]([])
		    this[CHANGE_MARKETING_SEARCH_VAL]("")
		    uni.$emit("resetMarketing")
		    this.$emit("handleSureMarketing")
		},
		handleSureMarketing() {
		    this.$refs.showRightMarketing.close()
		    this.$emit("handleSureMarketing")
		},
		openWarehouseDrawer() {
		    this.$refs.showRightWarehouse.open()
		},
		handleResetWarehouse() {
		    this[CHANGE_WAREHOUSE_SELECTED]([])
		    this[CHANGE_WAREHOUSE_SEARCH_VAL]("")
		    uni.$emit("resetWarehouse")
		    this.$emit("handleSureWarehouse")
		},
		handleSureWarehouse() {
		    this.$refs.showRightWarehouse.close()
		    this.$emit("handleSureWarehouse")
		},
        openMaterialDrawer() {
            this.$refs.showRightMaterial.open()
        },
        handleResetMaterial() {
            this[CHANGE_MATERIAL_SELECTED]([])
            this[CHANGE_MATERIAL_SEARCH_VAL]("")
            uni.$emit("resetMaterial")
            this.$emit("handleSureMaterial")
        },
        handleSureMaterial() {
            this.$refs.showRightMaterial.close()
            this.$emit("handleSureMaterial")
        },
        openDeptDrawer() {
            this.$refs.showRightDept.open()
        },
        handleResetDept() {
            this[CHANGE_DEPT_SELECTED]([])
            this[CHANGE_DEPT_SEARCH_VAL]("")
            uni.$emit("resetDept")
            this.$emit("handleSureDept")
        },
        handleSureDept() {
            this.$refs.showRightDept.close()
            this.$emit("handleSureDept")
        },
		zeroClick(item) {
		    this[CHANGE_ZERO_SELECTED](item)
		},
    },
}
</script>

<style lang="scss">
.sale-filter-container {
	position: relative;
    height: calc(100% - 120rpx);
	margin-top:120rpx;
	margin-top:calc(120rpx + constant(safe-area-inset-top));
	margin-top:calc(120rpx + env(safe-area-inset-top));
    overflow: scroll;
    color: $color-gray-1;
    .title {
		padding: 0 32rpx;
        margin-bottom: 36rpx;
        font-size: 34rpx;
    }

    .range-time {
        padding: 0 32rpx;
        border-bottom: 10rpx solid #f4f4f4;
        .text {
            margin-bottom: 12rpx;
            font-size: 28rpx;
        }
    }
	.ans-range-time{
		padding-top:60rpx
	}

    .sales-man {
		padding:0 32rpx;
        .text {
            margin: 10rpx 0;
            font-size: 28rpx;
        }

        .select-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 64rpx;
            padding: 0 24rpx;
            background: $color-white;
            border: 1rpx solid #b9c0d0;
            color: $color-gray-3;

            .has-salesman {
                color: $color-gray-1;
            }
        }
    }

    ::v-deep .uni-drawer {
        z-index: 1000;
    }
}
.unselected-icon,
.selected-icon {
    width: 32rpx;
    height: 32rpx;
    border-radius: 50%;
}

.unselected-icon {
    border: 2rpx solid $uni-border-color;
}

.selected-icon {
    border: 1rpx solid $app-color-main;

    .point {
        width: 16rpx;
        height: 16rpx;
        border-radius: 50%;
        background-color: $app-color-main;
    }
}
    .bottom-wrapper {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10;
        height: 72rpx;
        display: flex;
        font-size: 28rpx;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
        view {
            flex: 1;
        }

        .reset-btn {
            background-color: $color-white;
            border-top: 1rpx solid #f0f0f0;
        }

        .sure-btn {
            background-color: $app-color-main;
            color: $color-white;
        }
    }
	.apple-style{
	}
</style>
